<template>
    <div>
        <a-modal
        title="选择人员"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        width="800px"
        wrapClassName="full-modal-select-personnel"
        :dialogStyle="{top:'30px'}"
        >
            <div class="reimbursement-selectPersonnel-box" v-if="visible">
                <commpVxeTable
                :key="dataTableKey"
                :config="dataTableConfig"
                :columns="columnsVxe"
                :formItem="formItem"
                :conditionBtnRow="true"
                ref="acceptanceRegistrationRef"
                @checkboxChange="selectedRowKeysChange"
                @searchEvent="searchEvent"
                @resetEvent="resetEvent"
                :isCanWrap="true"
                >
                    <template v-slot:gznxks_name="{data}">
                        <!-- :style="{width:data.widthString}" -->
                        <div :style="{width:data.widthString}" style="display: flex;align-items: center;">
                            <a-input-number style="flex: 1;" id="inputNumber" placeholder="开始年限" v-model="nxData.gznxks" @change="nxChange" :min="0" :precision="0"/>
                            <span>-</span>
                            <a-input-number style="flex: 1;" id="inputNumber" placeholder="结束年限" v-model="nxData.gznxjs" @change="nxChange" :min="0" :precision="0"/>
                        </div>
                    </template>
                    <!-- <template v-slot:externalOperations="{data}">
                        <vxe-form-item>
                            <template>
                                <a-button class="blue-btn" type="primary" @click="exportTraining()">导出</a-button>
                            </template>
                        </vxe-form-item>
                    </template> -->
                    <template v-slot:sex_default="{row}">
                        <span>{{ row.sex == 1?'男':'女' }}</span>
                    </template>
                    <!-- <template v-slot:fjcylb_slotName="{row}">
                        <compSelector
                        v-model="category"
                        :defaultValue="category"
                        compType="Checkbox"
                        dictionaryType="检查员登记类别"
                        @selectHandleChange="($event)=>{dataTableConfig.paramet={...dataTableConfig.paramet,flx:category.length?category.join(','):''}}"
                        />
                    </template> -->
                    <template v-slot:realname_name="{row}">
                        <!-- <a @click="viewClick(row,true)"> -->
                            <span style="padding-right: 21;" v-if="row.realname.length == 2">
                                <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                                {{trem}}
                                <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                                </span>
                            </span>
                            <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                        <!-- </a> -->
                    </template>
                    <template v-slot:fgzdw_orgName="{row}">
                        {{ row.fgzdw }}/{{ row.fgzdwbm }}
                    </template>
                    <template v-slot:status_name="{row}">
                        {{ row.status == 1?'正常':'冻结' }}
                    </template>
                    <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                        <a-form layout="inline" class="search-form" >
                            <a-form-item >
                                <a-button class="blue-btn" type="primary" @click="modifyClick(row,false)">修改</a-button>
                            </a-form-item>
                            <a-form-item >
                                <a-button class="blue-btn" type="primary" @click="viewClick(row,true)">查看</a-button>
                            </a-form-item>
                        </a-form>
                    </template>
                </commpVxeTable>
            </div>
            <a-modal v-model="selectVisible" title="设置已选人员身份" @ok="selectHandleOk" @cancel="selectVisible = false">
                <div style="display: flex;justify-content: center;align-items: center;">
                    <span style="font-size: 16px;font-weight: 600;display: inline-block;padding: 5px;background-color: #e6f7ff;margin-right: 5px;margin-top: 3px;">审评身份：</span>
                    <compSelector
                        style="margin-top: 4px;"
                        v-model="fjcsf"
                        :defaultValue="fjcsf"
                        compType="Select"
                        :bigFontSize="true"
                        dictionaryType="审评身份"
                        :options="[{
                            label:'组长',
                            value:'组长',
                        },{
                            label:'组员',
                            value:'组员',
                        },{
                            label:'预备审评员',
                            value:'预备审评员',
                        },{
                            label:'观察员',
                            value:'观察员',
                        }]"
                        :height="32"
                        :width="180"
                    />
                </div>
            </a-modal>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import {jcyfybxdsaveSelectBxry,} from './service/index'
import moment from 'moment'
import assessCheckApi from './service/api'
export default {
    components:{
        compSelector,
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            nxData:{
                gznxks:'',
                gznxjs:'',
            },
            category:[],
            dataTableKey:null,
            addEditParameter:{},
            selectVisible:false,
            formItem:[
                // {
                //     label: '账户状态',
                //     model: 'status',
                //     type:'Select',
                //     dictionaryType:'账户状态'
                // },
                // {
                //     label: '账号',
                //     model: 'username',
                // },{
                {
                    label: '姓名',
                    model: 'realname',
                },{
                    label: '工作单位',
                    model: 'fgzdw',
                }
                // ,{
                //     label: '从事审评工作年限',
                //     model: 'gznxks',
                //     slotName:'gznxks_name'
                // }
                // {
                //     label: '工作年限结束',
                //     model: 'gznxjs',
                //     slotName:'gznxjs_name'
                // },

                // {
                //     label: '所属库',
                //     model: 'fssk',
                //     type:'Select',
                //     dictionaryType:'核查员所属库',
                //     searchType:'收起',
                // },
                ,{
                    label: '单位类型',
                    model: 'fdwlx',
                    type:'Select',
                    dictionaryType:'单位类型',
                },{
                    label: '性别',
                    model: 'sex',
                    type:'Select',
                    dictionaryType:'性别',
                },
                // {
                //     label: '学历',
                //     model: 'fxl',
                //     type:'Select',
                //     dictionaryType:'学历代码',
                //     searchType:'收起',
                //     type:'Checkbox',
                //     convert:true,
                // },
                // {
                //     label: '审评类型',
                //     model: 'flx',
                //     type:'Checkbox',
                //     dictionaryType:'检查员登记类别',
                //     convert:true,

                // }
                ],//
            columnsVxe:[
            {
                type: 'checkbox',
                width: 60 ,
                fixed: 'left'
            },
            // {
            //     title: '账号', //列头显示文字
            //     field: 'username',
            //     slots: { header:'username_header',default: 'username_name' },
            //     titleInterval:true,
            //     width:100,
            // },
            {
                title: '姓名', //列头显示文字
                field: 'realname',
                slots: {
                    header:'realname_header',
                    default: 'realname_name'
                },
                titleInterval:true,
                width:90,
            },{
                title: '性别', //列头显示文字
                field: 'sex',
                titleInterval:true,
                slots: {
                    header:'sex_header',
                    default:'sex_default',
                },
                width:70,
            },{
                title: '工作单位/部门',
                field: 'fgzdw',
                slots: { default: 'fgzdw_orgName' },

            },
            // {
            //     title: '手机号码', //列头显示文字
            //     field: 'phone',
            //     width:115,
            // },{
            //     title: '身份证号', //列头显示文字
            //     field: 'fsfzh',
            //     width:185,
            // },
            {
                title: '学历', //列头显示文字
                field: 'fxl',
                slots: { header:'fxl_header',},
                titleInterval:true,
                width:115,
            },{
                title: '专业', //列头显示文字
                field: 'fsxzy',
            },{
                title: '职称', //列头显示文字
                field: 'fzc',
                slots: { header:'fzc_header',},
                titleInterval:true,
                width:115,
            },{
                title: '从事审评工作开始时间', //列头显示文字
                field: 'fcsjckssj',
                width:115,
            }
            // ,{
            //     title: '审评类型', //列头显示文字
            //     field: 'flx',
            // }
            // ,{
            //     title: '账户状态',
            //     field: 'status',
            //     slots: { default: 'status_name' },
            //     width:80,
            // },{
            //     title: '创建时间',
            //     field: 'createTime',
            //     width:152,
            // }
            ],
            dataTableConfig:{
                api: assessCheckApi.jcyfybxdqueryKSelectUserPageList,
                rowId: 'id',
                height:window.innerHeight - 360,
                paramet:{

                }
            },
            selectedRowKeysArr:[],
            searchFrom:{},
            formState:{},
            fjcsf:'',
        }
    },
    watch:{

    },
    mounted(){


    },
    methods:{
        getData(row){
            this.formState = row
        },
        selectedRowKeysChange(row){
            this.selectedRowKeysArr = []
            row.forEach(item => {
                this.selectedRowKeysArr.push(item.id)
            });
        },
        searchEvent(){
            this.selectedRowKeysArr = []
        },
        resetEvent(){
            this.selectedRowKeysArr = []
        },
        
        handleOk(){
            if(this.selectedRowKeysArr.length){
                this.selectVisible = true
            }else{
                this.$message.warning('请先选择人员')
            }
        },
        handleCancel(){
            this.visible = false
        },
        selectHandleOk(){
            let data = {
                ...this.formState,
                ids:this.selectedRowKeysArr.join(','),
                fjcsf:this.fjcsf
            }
            jcyfybxdsaveSelectBxry(data).then(res=>{
                if(res.code == 200){
                    this.$message.success(res.message)
                    this.$emit('dataTableChange')
                    this.visible = false
                    this.selectVisible = false
                }else{
                    this.$message.warning(res.message)
                }
            })
        }, 
    },
    
}
</script>
<style lang="less">
.reimbursement-selectPersonnel-box{

}
.full-modal-select-personnel{
    .ant-modal-body {
        padding: 8px;
    }
    // .ant-modal {
    //     max-width: 100%;
    //     top: 0;
    //     padding-bottom: 0;
    //     margin: 0;
    // }
    // .ant-modal-content {
    //     display: flex;
    //     flex-direction: column;
    //     height: calc(100vh);
    // }
    // .ant-modal-body {
    //     flex: 1;
    //     padding:8px 0;
    //     height: calc(100vh - 108px);
    // }
}
</style>
